<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="angular.min.js"></script>
    <script src="jquery-1.11.3.min.js"></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        form{
            width: 300px;
            margin: 100px auto;
            position: relative;
        }
        h3{
            width: 75px;
            height: 30px;
            float: left;
            height: 40px;
            background: #D8D8D8;
            border-radius: 5px;
            text-align: center;
            line-height: 30px;
        }
        input.chu{
            float: right;
        }
        .text{
            width: 295px;
            height: 50px;
            border:1px solid red;
            position: absolute;
            border-radius: 5px;
            top: -95px;
            left: 0px;
        }
        .tijiao{
            width: 225px;
            height: 40px;
        }
    </style>
</head>
<body>

<form method="get">
    <h2 class="text">
    	
    <?php



if(isset($_GET['one'])&&isset($_GET['fuhao'])&&isset($_GET['three'])){
    $x = $_GET['one'];
    
    $fuhao = $_GET['fuhao'];
    $y = $_GET['three'];

    switch ($fuhao){
        case '+':
            echo $x+$y;
            break;
        case '-':
            echo $x-$y;
            break;
        case '*':
            echo $x*$y;
            break;
        case '/':
            echo $x/$y;
            break;
    }
}


?>
   
    </h2>
    <h3 class="num">1</h3>
    <h3 class="num">2</h3>
    <h3 class="num">3</h3>
    <h3 class="fuhao">+</h3>
    <h3 class="num">4</h3>
    <h3 class="num">5</h3>
    <h3 class="num">6</h3>
    <h3 class="fuhao">-</h3>
    <h3 class="num">7</h3>
    <h3 class="num">8</h3>
    <h3 class="num">9</h3>
    <h3 class="fuhao">*</h3>
    <input type="submit" name="tijiao"  value="=" class="tijiao" />
    <input type="hidden" name="one" value=""  id="one">
    <input type="hidden" name="fuhao" id="two">
    <input type="hidden"  name="three" id="three">
    <h3 class="fuhao">/</h3>
</form>

<script>
var sta =1;
    $("form .num").click(function () {
	
		if(sta==1){
//			获得他本身的内容
    	var a = $(this).html();
    	
    	a = $("#one").val()+a;
//  	把h3的内容赋值给#one里面的value
    	$("#one").val(a);
//  	再把内容输出在h2的HTML里面
    	$(".text").html(a);
    }
    	if (sta==2) {
    	var b = $(this).html();
    	b = $("#three").val()+b;
    	$("#three").val(b);
    	$(".text").html(b);
		}
	

 })
$("form .fuhao").click(function(){
		var c = $(this).html();
//  	a+=a;
    	$("#two").val(c);
    	$(".text").html(c);
    	sta=2;
})






</script>


</body>
</html>